<template>
  <a-modal
    :width="800"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 出库占用 </template>
    <div>
      <a-form :model="form" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="posts.post2" label="销售订单编号：">
              <a-input v-model="form.orderNumber" allow-clear
            /></a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="posts.post2" label="客户名称：">
              <a-input v-model="form.clientName" allow-clear
            /></a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="posts.post2" label="物料编码：">
              <a-input v-model="form.number" allow-clear
            /></a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="posts.post2" label="物料名称：">
              <a-input v-model="form.name" allow-clear
            /></a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="posts.post2" label="占用数量：">
              <a-input-number
                :min="1"
                v-model="form.Amount"
                :style="{ width: '320px' }"
            /></a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  // import { cloneDeep } f rom 'lodash';

  const props = withDefaults(
    defineProps<{
      occupiedInfo: any;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const emit = defineEmits(['update:visible', 'poductOccupiedEdit']);
  const form = ref<any>({});

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const handleOk = async () => {
    const { id, Amount } = form.value;
    emit('poductOccupiedEdit', { id, Amount });
  };

  watchEffect(() => {
    if (modalVisible.value) {
      form.value.Amount = null;
      form.value = props.occupiedInfo;
    }
  });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
